<template>
	<view>
		<view class="page__content">
			<up-navbar :fixed="false" title="快捷发起" :autoBack="true" :safeAreaInsetTop="true" style="width: 100%;">
			</up-navbar>


			<view class="page__content__main">
				<view class="shortcut-content">
					<view class="left_wrap">
						<view class="leftItem" :class="selectedTreeTypeIndex==index ? 'on' : ''"
							v-for="(treeType,index) in module.treeTypes" @click="changeTreeType(treeType,index)"
							:key="index">
							<view class="leftItemTag" :class="selectedTreeTypeIndex==index ? 'on' : ''"></view>
							<text>{{treeType.treeTypeName}}</text>
							<u-badge style="margin-top:-8px;"
								:value="treeType.pages.filter(item=>item.IsChecked).length" max="9" showZero
								type="error"></u-badge>
						</view>
					</view>
					<view class="right_wrap">
						<u-cell v-for="(page,index) in selectedTreeType.pages" @click="toggleShortcut(page)"
							:key="index">
							<template #title>
								<view style="display: flex;justify-content: flex-start;align-items: center;">
									<uni-icons v-if="page.CustomFont && page.PIC_PH" :fontFamily="page.CustomFont"
										:size="22"
										:color="page.AP_Colour">{{ uni.$utils.toUniCode(page.PIC_PH) }}</uni-icons>
									<uni-icons v-else fontFamily="CustomFontPlatform" :size="22"
										color="#3ace4b">{{ uni.$utils.toUniCode('&#xe62c;') }}</uni-icons>
									<text class="rightItem">{{page.APFunName}}</text>
								</view>
							</template>
							<template #right-icon>
								<!-- <checkbox :checked="page.IsChecked"
									:disabled="page.IsShortcut && page.KanBanID==shortcutSetting.currBoardID"
									activeBackgroundColor="#51d0d0" activeBorderColor="#51d0d0">
								</checkbox> -->
								<up-checkbox usedAlone :size="18" :checked="page.IsChecked"
									:disabled="page.IsShortcut && page.KanBanID==shortcutSetting.currBoardID"
									active-color="#51d0d0"></up-checkbox>
							</template>
						</u-cell>
					</view>
				</view>

			</view>

			<view class="page__content__bottom" :style="uni.$utils.disposeSafeBottomFun()">
				<button class="content_bottom_primary_Btn page__content__bottom__btn" @click="saveRow">提交</button>
			</view>

		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onUnmounted, computed, getCurrentInstance, nextTick, reactive } from 'vue';
	import { onLoad, onReady, onShow, onUnload } from "@dcloudio/uni-app";
	import useRequestQueue from '@/uni_modules/mc-ui/libs/http/UniversalRequestQueue';
	const { request, requestByUrl, onAllComplete, onError } = useRequestQueue();

	import { useMainStore, useInventoryStore, useUserStore, usePermissionStore } from '@/store';
	const inventoryStore = useInventoryStore();
	const mainStore = useMainStore();
	const userStore = useUserStore();
	const permissionStore = usePermissionStore();

	let shortcutSetting = ref<any>(null);
	shortcutSetting.value = mainStore.BaseScreenParm;
	// 当前选中菜单功能分类下标
	let selectedTreeTypeIndex = ref(0);
	let module = ref<any>(null);
	module.value = shortcutSetting.value.currModule
	let selectedTreeType = ref<any>(null);
	selectedTreeType.value = shortcutSetting.value.currModule.treeTypes[selectedTreeTypeIndex.value];

	let currNums = ref<any>(null);
	currNums.value = shortcutSetting.value.currShortcut.length;

	// 初始化选中状态
	const initTree = (menus : any) => {
		// 更新非默认已有菜单为选中
		menus.forEach((menu : any) => {
			let _treeType = module.value.treeTypes.find((tree : any) => tree.treeType == menu.TreeType);
			let _page = _treeType.pages.find((page : any) => page.APPFunID == menu.APPFunID);
			_page.IsChecked = true;
		});
		// 更新选中未保存为未选中
		module.value.treeTypes.forEach((tree : any) => {
			tree.pages.forEach((item : any) => {
				let flag = menus.some((menu : any) => menu.APPFunID == item.APPFunID);
				if (!flag && !item.IsShortcut) {
					item.IsChecked = false;
				}
				// 更新非当前看板默认快捷菜单为未选中
				if (!flag && item.IsShortcut && item.KanBanID != shortcutSetting.value.currBoardID) {
					item.IsChecked = false;
				}
			})
		})
	}


	// 快捷菜单-保存
	const saveRow = () => {
		let _defaultCheckedPages = [] as any;
		let _otherCheckedPages = [] as any;

		module.value.treeTypes.forEach((tree : any) => {
			tree.pages.forEach((page : any) => {
				// 已选中非默认菜单
				if (!page.IsShortcut && page.IsChecked) {
					_otherCheckedPages.push(page);
				}
				// 已选中其他看板默认菜单
				if (page.IsShortcut && page.KanBanID != shortcutSetting.value.currBoardID && page.IsChecked) {
					_otherCheckedPages.push(page);
				}
				// 已选中当前看板默认菜单
				if (page.IsShortcut && page.KanBanID == shortcutSetting.value.currBoardID && page.IsChecked) {
					_defaultCheckedPages.push(page);
				}
			})
		})

		let shortcuts = [..._defaultCheckedPages, ..._otherCheckedPages];
		persistShortcut(shortcuts);

	};

	// 快捷菜单-缓存
	const persistShortcut = (shortcuts : any) => {
		const cacheKey = 'shortcuts_' + shortcutSetting.value.currBoardID;
		uni.setStorageSync(cacheKey, JSON.stringify(shortcuts))

		uni.showToast({
			title: '设置成功!',
			icon: 'success',
			success() {
				setTimeout(() => {
					uni.navigateBack({
						delta: 1,
						success() {
							eventChannel.value.emit('refreshShortcut');
						}
					})
				}, 800)
			}
		})
	}




	// 菜单功能分类-切换
	const changeTreeType = (treeType : any, index : number) => {
		selectedTreeType = treeType;
		selectedTreeTypeIndex.value = index;
	}

	// 快捷菜单-选中/反选
	const toggleShortcut = (menu : any) => {

		if ((!menu.IsShortcut && menu.KanBanID == shortcutSetting.value.currBoardID) || (menu.KanBanID != shortcutSetting.value.currBoardID)) {
			if (menu.IsChecked) {
				menu.IsChecked = false;
				currNums.value -= 1;
			} else {
				if (currNums.value < 16) {
					menu.IsChecked = true;
					currNums.value += 1;
				} else {
					uni.showToast({
						title: '菜单数已达上限!',
					})
					return false;
				}
			}
		}
	}

	let eventChannel = ref<any>(null);

	const instance = getCurrentInstance() as any;

	onReady(() => {
		initTree(shortcutSetting.value.currShortcut);
	})

	onMounted(() => {
		eventChannel.value = instance.proxy.getOpenerEventChannel();

	})
</script>

<style lang="scss" scoped>
	.page__content {
		height: 100vh;

		&__main {
			overflow: hidden;


			.shortcut-content {
				height: 100%;
				display: flex;
				justify-content: space-between;

				.left_wrap {
					height: 100%;
					display: flex;
					flex-direction: column;
					background-color: #F7F8FA;
					width: 25%;
					overflow-y: auto;

					.leftItem {
						display: flex;
						align-items: center;
						height: 44px;
						font-size: 15px;
						padding: 10px 0;

						.leftItemTag {
							width: 3px;
							height: 20px;
							margin-right: 5px;
							background-color: transparent;
						}

						.leftItemTag.on {
							background-color: $main-background-color;
							border-color: #FFFFFF;
							color: #ffffff;
						}
					}

					.leftItem.on {
						background-color: #FFFFFF;
					}

				}

				.right_wrap {
					display: flex;
					flex-direction: column;
					background-color: #FFFFFF;
					width: 75%;
					height: 100%;
					overflow-y: auto;

					.rightItem {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						font-size: 14px;
						margin-left: 5px;
					}

				}
			}

		}
	}
</style>